<template>
	<div class="container-wrapper">
		<div class="start_ba">
			<div :class="headIos?'title-ios':''" class="title">
				<a href="javascript:;" @click="$router.go(-1)" class="go-back">
			      <i></i>
			    </a>
			    <h1 >开始背调</h1>
			</div>
			<div :class="headIos?'search_infos-ios':''" class="search_infos">
				<div class="info_bg info_mar">
					<i class="info_bgi"></i>
					<span>调查对象信息</span>
				</div>
				<div class="border-ran">
					<div class="form-group">
						<span class="form-label">姓名</span>
						<div class="form-input">
							<input type="text" class="m-text _input" v-model.trim="oName" placeholder="请输入身份证上的全名">
						</div>
					</div>
					<div class="form-group">
						<span class="form-label">身份证</span>
						<div class="form-input">
							<input type="text" maxlength="18" class="m-text _input" v-model.trim="oCard" placeholder="请输入与姓名一致的身份证号">
						</div>
					</div>
					<div class="form-group">
						<span class="form-label">手机号码</span>
						<div class="form-input">
							<input type="text" maxlength="11" class="m-text _input" v-model.trim="oMobile" placeholder="请输入调查对象的手机号">
						</div>
					</div>
				</div>
				<div class="search_item">请确保以上信息填写无误，否则会导致异常报告。</div>
			</div>
		</div>
		<div class="search_info search_show">
			<div class="info_bg">
				<i class="info_ver"></i>
				<span class="info_m">选择背调项</span>
			</div>
		</div>
		<tab :animate="false">
	      	<tab-item @on-item-click="chosesingle" selected>自定义购买</tab-item>
	      	<tab-item @on-item-click="chosemeals" class="close">套餐购买</tab-item>
	    </tab>
	   <div class="select_normal_nes item-selected">
			 	<div class="is_selected"></div>
    		<div class="page_price">
    			<div class="pageversion">基础包（必选）</div>
    			<div class="pageblank"></div>
    			<div class="pageprice">￥{{base.price}}</div>
    		</div>
    		<div class="basicpage">
    			<div class="basicitem">
    				<div class="shenfen"></div>
    				<div class="shenfen_text">身份认证</div>
    			</div>
    			<div class="basicitem">
    				<div class="telephone"></div>
    				<div class="shenfen_text">手机验证</div>
    			</div>
    			<div class="basicitem">
    				<div class="crime"></div>
    				<div class="shenfen_text">社会不良</div>
    			</div>
    			<div class="basicitem">
    				<div class="remark"></div>
    				<div class="shenfen_text">职说评价</div>
    			</div>
    		</div>
    	</div>
	    <checker selected-item-class="item-selected"  v-model="chooseid" type="checkbox" default-item-class="demo5-item">
	        <checker-item :value="detail" v-show="series" @on-item-click="onItemClick(1)">
	        	<div class="select_normal select_page">
		        	<div class="page_price page_price_bottom">
	        			<div class="pageversion">专业包</div>
	        			<div class="pageblank"></div>
	        			<div class="pageprice">￥{{detail.price}}</div>
	        		</div>
	        		<pageprice showmargin="showmargin" classimg="" typeTitle ="学历验证" typeContent="国家承认的教育机构颁发的最高学历"></pageprice>
	        		<pageprice classimg="job" typeTitle ="职业资格" typeContent="人力资源和社会保障部登记的职业资格，不包括律师、会计、医生行业的等级资格"></pageprice>
	        		<!--<pageprice classimg="security" typeTitle ="上海社保" typeContent="数据来源于公安部，权威认证来源于公"></pageprice>-->
	        	</div>
	        </checker-item>
	        <checker-item :value="depth" v-show="series" @on-item-click="onItemClick(2)">
	        	<div class="select_normal select_page">
		        	<div class="page_price page_price_bottom">
	        			<div class="pageversion">深度包</div>
	        			<div class="pageblank"></div>
	        			<div class="pageprice">￥{{depth.price}}</div>
	        		</div>
	        		<pageprice showmargin="showmargin" classimg="business" typeTitle ="商业利益冲突" typeContent="查询个人注册的工商信息，包括个人担任法定代表人、个人对外投资、个人职位等"></pageprice>
	        		<pageprice showmargin="showmargin" classimg="executed" typeTitle ="失信被执行人" typeContent="查询法院公开的失信执行人记录"></pageprice>
	        		<pageprice classimg="black_name" typeTitle ="网贷黑名单" typeContent="查询个人P2P贷款逾期情况记录"></pageprice>
	        	</div>
	        </checker-item>
	        <checker-item :value="school" v-show="!series" @on-item-click="onItemClick(3)">
	        	<div class="select_normal select_special">
	        		<pageprice classimg="" typeTitle ="学历验证" typeContent="国家承认的教育机构颁发的最高学历" :typePrice="school.price"></pageprice>
	        	</div>
	        </checker-item>
	        <checker-item :value="job" v-show="!series" @on-item-click="onItemClick(4)">
	        	<div class="select_normal select_three">
	        		<pageprice classimg="job" typeTitle ="职业资格" typeContent="人力资源和社会保障部登记的职业资格，不包括律师、会计、医生行业的等级资格" :typePrice="job.price"></pageprice>
	        	</div>
	        </checker-item>
	        <!--<checker-item value="6" v-if="!series">
	        	<div class="select_normal">
	        		<pageprice classimg="security" typeTitle ="上海社保" typeContent="数据来源于公安部，权威认证来源于公" typePrice="9.9"></pageprice>
	        	</div>
	        </checker-item>-->
	        <checker-item :value="business" v-show="!series"  @on-item-click="onItemClick(5)">
	        	<div class="select_normal select_three">
	        		<pageprice classimg="business" typeTitle ="商业利益冲突" typeContent="查询个人注册的工商信息，包括个人担任法定代表人、个人对外投资、个人职位等" :typePrice="business.price"></pageprice>
	        	</div>
	        </checker-item>
	        <checker-item :value="excuted" v-show="!series" @on-item-click="onItemClick(6)">
	        	<div class="select_normal select_special">
	        		<pageprice classimg="executed" typeTitle ="失信被执行人" typeContent="查询法院公开的失信执行人记录" :typePrice="excuted.price"></pageprice>
	        	</div>
	        </checker-item>
	        <checker-item :value="black" v-show="!series" @on-item-click="onItemClick(7)">
	        	<div class="select_normal select_special">
	        		<pageprice classimg="black_name" typeTitle ="网贷黑名单" typeContent="查询个人P2P贷款逾期情况记录" :typePrice="black.price"></pageprice>
	        	</div>
	        </checker-item>
	    </checker>
	   	<div class="already_ready">
	   		<div class="agree_telephone_text">如需要调查工作履历和工作表现请致电 &nbsp;<a class="agree_telephone_num" href="tel:400-832-5966">400-832-5966</a></div>
	   		<check-icon :value.sync="isRemind">我已阅读<span @click.stop.prevent="showRelief" style="color:#F89721;">《萝卜猎手背景调查免责声明》</span></check-icon>
			 </div>
			<div class="already_readybottom"></div>
	   	<a @click="_gobuy" class="go_buy">
	   		<div class="serial_choose_price">合计：￥<span>{{count}}</span></div>
	   	</a>
	   	<toast v-model="showPositionValue" type="text" width="100%" :time="1800" is-show-mask text="调查对象信息格式有误！" position="bottom"></toast>
	   	<boxconfirm content_title="请选择萝卜猎手背景调查免责声明" content_confirm="确定" content_cancel="取消" ref="boxconfirm"></boxconfirm>
	   	<boxconfirm content_title="请确保以上信息填写无误，否则会导致异常报告。" content_confirm="确定" content_cancel="取消" @confirmClick="queding" ref="bbboxconfirm"></boxconfirm>
	   	<boxconfirm content_title="系统繁忙，请稍后再试。" content_confirm="确定" content_cancel="取消" ref="bboxconfirm"></boxconfirm>
	   	<boxconfirm content_title="管理员审核通过后可使用此功能" content_confirm="确定" content_cancel="取消" ref="bbbboxconfirm" @confirmClick="goHome" @cancelClick="goHome" @allScreen="goHome"></boxconfirm>
	</div>
</template>

<script>
	import { Toast, CheckIcon,Tab, TabItem, Checker, CheckerItem, Divider, Group, Cell, Popup, TransferDom,Panel } from 'vux';
	import pageprice from '../common/pageprice';
	import util from '../../libs/util';
	import boxconfirm from '../common/boxconfirm';
	export default {
		components:{
			Tab,
    		TabItem,
				Checker,
		    CheckerItem,
		    Divider,
		    Group,
		    Cell,
		    Popup,
		    Panel,
		    pageprice,
		    boxconfirm,
				Toast,
				CheckIcon
		},
		data () {
		    return {
		    	series:false,
		    	chooseid:[],
		    	sourceType:'NORMAL',
		    	base:{},
		    	detail:{},
		    	depth:{},
		    	job:{},
		    	business:{},
		    	security:{},
		    	black:{},
		    	excuted:{},
		    	school:{},
		    	oName:'',
		    	oMobile:'',
		    	oCard:'',
		    	secretId:'',
					showPositionValue:false,
					headIos:false,
					isRemind:true,
					profeFlag:true,
					deepFlag:true,
			}
		},
		methods:{
			onItemClick:function(i){
				// alert(i);
				var that = this;
				if (i == 1) {
					if (that.profeFlag) {
						that.profeFlag = false;
						that.deepFlag = true;
					} else {
						if (!that.deepFlag) {
							that.chooseid = [];
							that.chooseid.push(that.detail);
							that.profeFlag = false;
							that.deepFlag = true;
						} else {
							that.chooseid = [];
							that.profeFlag = true;
							that.deepFlag = true;
						}
					}

				} else if (i == 2) {
					if (that.deepFlag) {
						if (that.profeFlag) {
							setTimeout(function() {
								that.chooseid.push(that.detail);
								that.deepFlag = false;
								that.profeFlag = false;
							}, 10)
						} else {
							// that.chooseid=[];
							// that.chooseid.push(that.detail);
							// that.chooseid.push(that.depth);
							that.deepFlag = false;
							that.profeFlag = false;
						}

					} else {
						that.deepFlag = true;
						that.profeFlag = false;
					}
				}
			},
			chosemeals:function(){
				this.series=true;
				this.chooseid=[];
				this.deepFlag = true;
				this.profeFlag = true;
			},
			chosesingle:function(){
				this.series=false;
				this.chooseid=[];
				this.deepFlag = true;
				this.profeFlag = true;
			},
			showRelief:function(){
				this.$router.push({ path: '/relief' })
			},
			axIos(){
				var that = this;
				var url = 'lblsapp-h5/v2/report/queryGoodsForReqCreditReport.json';
				util.ajax.post(url).then(function(data){
					if(data.data.code==='0'){
						let goodsList = data.data.res.data.goodsInfoLlist;
						// console.log(goodsList,2222222);
						for (var item of goodsList) {
							switch(item.goodsType){
								case 'BASE':
									that.base={price:Number(item.goodsPrice),id:item.id};
									break;
								case 'DETAIL':
									that.detail={id:item.id,price:Number(item.goodsPrice)};
									break;
								case 'DEPTH':
									that.depthPrice = item.goodsPrice;
									that.depthId = item.id;
									that.depth={id:item.id,price:Number(item.goodsPrice)};
									break;
								case 'EDUCATION':
									that.school={id:item.id,price:Number(item.goodsPrice)};
									break;
								case 'PROFESSIONALCERTS':
									that.job={id:item.id,price:Number(item.goodsPrice)};
									break;
								case 'ENTINFO':
									that.business={id:item.id,price:Number(item.goodsPrice)};
									break;
								case 'SOCIALSECURITY':
									that.security={id:item.id,price:Number(item.goodsPrice)};
									break;
								case 'P2PBLACK':
									that.black={id:item.id,price:Number(item.goodsPrice)};
									break;
								case 'EXECUTED':
									that.excuted={id:item.id,price:Number(item.goodsPrice)};
									break;
							}
						}
					}else if(data.data.code === '01'){
						that.$refs.bbbboxconfirm.show();
					}else{
						that.$refs.bboxconfirm.show();
					}
				}).catch(function(error){
						that.$refs.bboxconfirm.show();
				})
			},
			_gobuy(){
				var that = this;
				var regname= /^[\u4e00-\u9fa5 ]{2,10}$/;
				var regtel = /^(0|86|17951)?(13[0-9]|15[012356789]|17[01356789]|18[0-9]|14[579])[0-9]{8}$/;
				var regidC = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
				var isname = regname.test(that.oName);
				var istel = regtel.test(that.oMobile);
				var isIdcard = regidC.test(that.oCard);
				// console.log(istel,1)
				// console.log(isIdcard,2)
				if(!istel ||! isIdcard || !isname){
					that.showPositionValue=true;
					return;
				}
				if(that.isRemind===false){
					that.$refs.boxconfirm.show();
					return;
				}
				that.$refs.bbboxconfirm.show();
			},
			queding(){
				var that = this;
				var goodlist = that.base.id; 
				for(var item of that.chooseid){
					goodlist=goodlist +',' + item.id
				}
				var url = '/lblsapp-h5/v2/report/saveReportInfoForAuth.json';
				let data = { name: that.oName, idCard: that.oCard, mobile: that.oMobile, goodsList: goodlist, sourceType: that.sourceType, secretFilesInfoId: this.secretId }
				// console.log(data);
				util.ajax.post(url, data).then(function(data) {
					// console.log(data)
					if (data.data.code === '0') {
						that.$router.push({ path: '/authorize' })
					} else {
						that.$refs.bboxconfirm.show();
					}
				}).catch(function(error) {
					that.$refs.bboxconfirm.show();
				})
			},
			goHome(){
				this.$router.push({ path: '/' })
			}
		},
		computed: {
		    // 此计算属性将始终是个数组
		    count(){
		    	var num =this.base.price;
		    	for(var item of this.chooseid){
		    		num +=item.price
		    	}
		    	if(num){
		    		return num.toFixed(2);	
		    	}
		    	
		    }
		},
		created(){
			if (window.navigator.userAgent.indexOf('LBLSIOS') > -1) {
				this.headIos = true
			} else {
				this.headIos = false
			};
			var that = this;
			this.oName=this.$route.query.name;
			this.oCard=this.$route.query.idCard;
			this.oMobile=this.$route.query.mobile;
			if(this.$route.query.sourceType){
				this.sourceType = this.$route.query.sourceType;
			}
			if(this.$route.query.secretId){
				this.secretId = this.$route.query.secretId;
			}
			this.axIos();
		},
	}
</script>

<style scoped>
	.container-wrapper{
		background: rgb(245,245,245);
	}
	.title{
	    width: 100%;
	    height: 45px;
    	line-height: 45px;
			position: fixed;
			top:0;
			left:0;
			background: url(../../assets/img/reference/start_bg.png) no-repeat top left;
			background-size: cover;
			z-index: 999;
	}
	.title-ios{
		
		width: 100%;
		height: 45px;
		line-height: 45px;
		position: fixed;
		top:20px;
		left:0;
		background: url(../../assets/img/reference/start_bg.png) no-repeat top left;
		background-size: cover;
		z-index: 999;
	}
	.title .go-back{
	    float: left;
	    width: 14.06%;
	    height: 45px;
	    font-size: 14px;
	    color: #212121;
	}
	.title .go-back i{
	    display: block;
	    width: 16px;
	    height: 16px;
	    margin-top: 15px;
	    margin-left: 15px;
	    background-image: url(../../assets/img/reference/jiantoul.png);
	    background-repeat: no-repeat;
	    background-size: contain;
	}
	.title h1{
		margin-left: 14.06%;
	    margin-right: 14.06%;
	    font-size: 18px;
	    text-align: center;
	    margin-bottom: 0;
	    margin-top: 0;
	    font-weight: normal;
	    color: #ffffff;
	}
	.choose-type{
		line-height: 20px;
		font-size: 1.6rem;
		color: #212121;
	}
	.start_ba{
		width: 100%;
		height: auto;
		background: url(../../assets/img/reference/start_bg.png) no-repeat top left;
		background-size: cover;
	}
	.search_infos{
		padding: 45px 4.3% 0px 3.7%;
	}
	.search_infos-ios{
		padding: 65px 4.3% 0px 3.7%;
	}
	.search_info{
		padding: 15px 4.3% 20px 3.7%;
	}
	.search_show{
		background: rgb(240,240,240);
	}
	.info_bg .info_bgi{
		width: 16px;
		height: 16px;
		background: url(../../assets/img/reference/info_bgi.png) no-repeat;
		background-size: 16px 16px;
		background-size: contain;
		float: left;
		margin-right: 3px;
	}
	.info_bg span{
		display: block;
		height: 16px;
		line-height: 16px;
		color: #ffffff;
		font-size: 1.4rem;
	}
	.info_mar{
		margin: 20px 0 18px 0;
	}
	.form-group {
	    height: 44px;
	    position: relative;
	    line-height: 44px;
	    border-bottom: 1px solid #eee;
	    display: flex;
	}
	.form-label {
	    font-size: 0.14rem;
	    background: #ffffff;
	    padding-left: 20px;
	    font-size: 1.4rem;
		color: #808080;
	}
	.form-group .form-input {
		flex: 1;
	    font-size: 0;
	    line-height: 44px;
	    border-radius: 0;
	    text-align: right;
	}
	.form-group .form-input .m-text{
		margin: 0;
		background: #ffffff;
		text-align: right;
		padding-right: 20px;
	}
	.search_item{
		height: 42px;
		line-height: 42px;
		font-size: 1rem;
		color: #FFFFFF;
	}
	.search_ver{
		margin: 15px auto 20px;
	}
	.info_ver{
		width: 16px;
	    height: 16px;
	    background-size: 16px 16px;
	    background-size: contain;
	    float: left;
	    margin-right: 3px;
		background: url(../../assets/img/reference/info_ver.png) no-repeat;
		background-size: 16px 16px;
	}
	.info_m{
		color: #808080 !important;
	}
	/*修改*/
	.vux-tab{
		background: rgb(240, 240, 240);
	}
	.vux-checker-box{
		background: rgb(240, 240, 240);	
	}
	.vux-tab .vux-tab-item{
		flex: 0 0 39%;
		font-size: 1.4rem;
		color: #808080;
		border: none;
		background: url(../../assets/img/reference/tabunselect.png) no-repeat;
		background-size: cover;
		line-height: 50px;
		
	}
	.vux-tab .vux-tab-item.vux-tab-selected{
		font-size: 1.4rem;
		color: #F89721;
		border: none;
		background: url(../../assets/img/reference/tabselect.png) no-repeat !important;
		background-size: cover !important;
		z-index: 99;
	}
	/*修改Checker 属性*/
	.item-selected{
		background: #F89721 !important;
		border-radius: 4px;
	}
	.vux-checker-item{
		display: block;
		width: 92%;
		box-sizing: border-box;
		margin: 5px 4% 0;
		background: #FFFFFF;
		border-radius: 4px;
		box-shadow: 1px 1px 5px #e8e8e8;
		position: relative;
	}
	.select_normal{
		padding: 11px 20px 17px 24px;
	}
	.select_special{
		padding: 11px 20px 17px 46px !important;
	}
	.select_three{
		padding: 11px 20px 17px 46px !important;
	}
	.select_normal_nes{
		position: relative;
		margin: 15px 4% 0;
	  padding: 11px 20px 17px 24px;
		background: #F89721;
		border-radius: 4px;
	}
	.select_normal_nes .is_selected{
    height: 16px;
    width: 16px;
    position: absolute;
    top: 13px;
    left: 20px;
		background: url(../../assets/img/reference/selected.png) no-repeat center;
		background-size: 16px;
	}
	.page_price{
		display: flex;
	}
	.page_price_bottom{
		padding-bottom: 14px;
	}
	.pageversion{
		flex: 0 0 auto;
		height: 20px;
		padding-left: 27px;
		line-height: 20px;
		font-size: 1.4rem;
		color: #808080;
	}
	.item-selected .pageversion{
		color: #FFFFFF;
	}
	.pageblank{
		flex: 1;
	}
	.pageprice{
		position: absolute;
    top: 11px;
    right: 20px;
		height: 20px;
		line-height: 20px;
		font-size: 1.6rem;
		color: #EE7316;
	}
	.item-selected .pageprice{
		color: #FFFFFF;
	}
	.basicpage{
		width: 100%;
		display: flex;
	}
	.basicitem{
		flex: 0 0 26%;
		height: 78px;
		padding-top: 23px;
		padding-right: 4%;
		box-sizing: border-box;
	}
	.basicitem:nth-child(4n){
		flex: 1;
		padding-right: 0;
	}
	.shenfen{
		height: 23px;
		background: url(../../assets/img/reference/shenfen.png)no-repeat;
		background-size: contain;
		background-position: center;
		margin-bottom: 13px;
	}
	.shenfen_text{
		font-size: 1.4rem;
		color: #ffffff;
		height: 20px;
		line-height: 20px;
		text-align: center;
	}
	@media screen and (max-width: 330px) {
	    .shenfen_text {
	        font-size: 1.2rem;
	    }
	}
	.telephone{
		height: 29px;
		background: url(../../assets/img/reference/telephone.png)no-repeat;
		background-size: contain;
		background-position: center;
		margin-bottom: 7px;
	}
	.crime{
		height: 31px;
		margin-bottom: 5px;
		background: url(../../assets/img/reference/crime.png)no-repeat;
		background-position: center;
		background-size: contain;
	}
	.remark{
		height: 31px;
		margin-bottom: 5px;
		background: url(../../assets/img/reference/remark.png)no-repeat;
		background-position: center;
		background-size: contain;
	}
	.already_ready{
		width: 100%;
		height: 91px;
		background: rgb(240,240,240);
		padding: 15px 4.3% 25px 3.7%;
		box-sizing: border-box;
	}
	.already_readybottom{
		width: 100%;
		height: 50px;
	}
	.agree_ready{
	    display: inline;
	    width: 17px;
	    height: 17px;
	    line-height: 17px;
	    margin: 0;
	    font-size: 0;
	    vertical-align: text-bottom;
	    background: none;
	}
	.agree_ment{
	    text-align: center;
    	font-size: 12px;
    	color: #212121;
	}
	.agree_telephone_text{
		margin-bottom: 17px;
		font-size: 1.2rem;
		color: #808080;
	}
	.agree_telephone_num{
		color: rgb(30,148,241);
	}
	.go_buy{
		display: block;
		position: fixed;
		bottom: 0;
		left:0;
		width: 100%;
		height: 50px;
		line-height: 50px;
		background: #F89721;
		color: #FFFFFF;
		font-size: 1.4rem;
		z-index: 99;
	}
	.serial_choose_price{
		z-index: 999;
		height: 50px;
		line-height: 50px;
		width: 100%;
		text-align: center;
	}
	.close{
		margin-left: -25px;
	}
	/*添加圆角*/
	.border-ran{
		border: 1px solid #ffffff;
		border-radius: 4px;
	}

</style>